<template>
  <view>
    <view class="box">
      <view
        class="user--container"
        :style="headStyleConfig.headBackGround"
      >
        <view :class="'user--layout ' + (userCenter.hideCartInlet ? '' : 'hideQrcode')">
          <view class="user--layout__info">
            <image
              :src="userInfo.avatarUrl"
              class="user--layout__image"
              v-if="userInfo.nikeName"
              @click="navSetUser"
            ></image>
            <image
              src="http://medusa-small-file.oss-cn-hangzhou.aliyuncs.com/api/head_portrait.jpg"
              class="user--layout__image"
              v-else
            ></image>
            <view class="user--layout__container">
              <view class="user--layout__nikeName">
                <view
                  class="user--layout__text"
                  v-if="userInfo.nikeName"
                >
                  {{userInfo.nikeName}}
                </view>
                <view
                  class="user--layout__text"
                  v-else
                  @click="authLoad"
                >登录 / 注册</view>
              </view>
              <view
                class="user--layout__member"
                @click="pageLink"
                data-link="/pages/memberVip/memberVip"
                v-if="member.status === 1"
              >
                <m-icon
                  name="iconhuiyuan1"
                  class="icon radius--inner__icon"
                  size="22rpx"
                ></m-icon>
                <text>{{member.rankName || ""}}</text>
              </view>
            </view>
          </view>
           <view class="user--layout__icon" v-if="userInfo.nikeName">
            <m-icon name="iconcode" size="25px" @click="openQrcode"
              style="width:45px;height:45px;background-color:rgba(0,0,0,0.08);border-radius:50px;color:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center">
            </m-icon>
            <view class="user--layout__icon__text">分销码</view>
          </view>
        </view>
        <view class="content">
          <view class="content__all">
            <view
              class="content__all--item"
              v-if="userInfo.nikeName"
              @click="balanceJumpHandle"
            >
              <view style="font-weight:bold;font-size:16px;">
                {{member.supplyAndRebateBonus ?  member.supplyAndRebateBonus : 0}}
              </view>
              <view style="margin-top:3px;font-size:13px">余额</view>
            </view>
            <view>|</view>
            <view
              class="content__all--item"
              @click="gotoIntegralShop"
            >
              <view style="font-weight:bold;font-size:16px;">{{integral}}</view>
              <view style="margin-top:3px;font-size:13px">积分</view>
            </view>
            <view>|</view>
            <view
              class="content__all--item"
              @click="gotoCollect"
            >
              <view style="font-weight:bold;font-size:16px;">{{collectNum}}</view>
              <view style="margin-top:3px;font-size:13px">收藏</view>
            </view>
            <view>|</view>
            <view
              class="content__all--item"
              @click="gotoFooter"
            >
              <view style="font-weight:bold;font-size:16px;">{{footNum}}</view>
              <view style="margin-top:3px;font-size:13px">足迹</view>
            </view>
          </view>
        </view>
        <view
          class="radius"
          v-if="userCenter.hideCartInlet && member.status === 2"
        >
          <view
            class="radius--inner"
            :style="'background-color: ' + headStyleConfig.cardColor"
          >
            <view
              class="radius--inner__item"
              :style="'color: ' + headStyleConfig.textColor"
            >
              尊享会员
              <text
                class="radius__inner--split"
                :style="'color: ' + headStyleConfig.textColor"
              >|</text>
              {{userCenter.getCartText}}
            </view>
            <view
              class="radius--inner__btn"
              @click="pageLink"
              data-link="/pages/member/member"
              :style="'background-color: ' + headStyleConfig.textColor + ';color: ' + headStyleConfig.cardColor + ';'"
            >
              <text class="radius--inner__text">立即开通</text>
            </view>
          </view>
        </view>
      </view>
      <view class="order">
        <view class="order__all">
          <view class="order__all--me">我的订单</view>
          <view
            class="order__all--check"
            @click="goOrder"
          >
            <text>查看全部订单</text>
            <u-icon
              name="arrow-right"
              class="order__all--arrow"
              size="12"
              color="rgba(69, 64, 60, 0.6)"
              top="1"
            ></u-icon>
          </view>
        </view>
        <view class="order__quick">
          <view
            class="cover--group__cell"
            @click.stop="coverOrderClick"
            data-url="/pages/order/order?type=0"
          >
            <view class="order__quick--item">
              <view class="order__quick--badge">
                <view
                  class="order__quick--number"
                  v-if="orderBadgeInfo.waitForPay !== '0'"
                >
                  {{orderBadgeInfo.waitForPay}}
                </view>
                <image
                  class="order__quick--image"
                  :src="orderInfo.waitIcon.url"
                ></image>
              </view>
              <view class="order__quick--text">{{orderInfo.waitIcon.name}}</view>
            </view>
          </view>
          <view
            class="cover--group__cell"
            @click.stop="coverOrderClick"
            data-url="/pages/order/order?type=1"
          >
            <view class="order__quick--item">
              <view class="order__quick--badge">
                <view
                  class="order__quick--number"
                  v-if="orderBadgeInfo.withDelivery !== '0'"
                >
                  {{orderBadgeInfo.withDelivery}}
                </view>
                <image
                  class="order__quick--image"
                  :src="orderInfo.waitDelivered.url"
                ></image>
              </view>
              <view class="order__quick--text">{{orderInfo.waitDelivered.name}}</view>
            </view>
          </view>
          <!-- <view
            class="cover--group__cell"
            @click.stop="coverOrderClick"
            data-url="/pages/order/order?type=2"
          >
            <view class="order__quick--item">
              <view class="order__quick--badge">
                <view
                  class="order__quick--number"
                  v-if="orderBadgeInfo.shipped !== '0'"
                >
                  {{orderBadgeInfo.shipped}}
                </view>
                <image
                  class="order__quick--image"
                  :src="orderInfo.deliveryIcon.url"
                ></image>
              </view>
              <view class="order__quick--text">{{orderInfo.deliveryIcon.name}}</view>
            </view>
          </view> -->
          <view
            class="cover--group__cell"
            @click.stop="coverOrderClick"
            data-url="/pages/order/order?type=3"
          >
            <view class="order__quick--item">
              <view class="order__quick--badge">
                <view
                  class="order__quick--number"
                  v-if="orderBadgeInfo.waitForPickup !== '0'"
                >
                  {{orderBadgeInfo.waitForPickup}}
                </view>
                <image
                  class="order__quick--image"
                  :src="orderInfo.waitPickingIcon.url"
                ></image>
              </view>
              <view class="order__quick--text">{{orderInfo.waitPickingIcon.name}}</view>
            </view>
          </view>
          <view
            class="cover--group__cell"
            @click.stop="coverOrderClick"
            data-url="/pages/order/order?type=6"
          >
            <view class="order__quick--item">
              <view class="order__quick--badge">
                <view
                  class="order__quick--number"
                  v-if="orderBadgeInfo.afsOrder !== '0'"
                >
                  {{orderBadgeInfo.afsOrder}}
                </view>
                <image
                  class="order__quick--image"
                  :src="orderInfo.afterSaleIcon.url"
                ></image>
              </view>
              <view class="order__quick--text">{{orderInfo.afterSaleIcon.name}}</view>
            </view>
          </view>
          <view
            class="cover--group__cell"
            v-if="hasOpenEvaluate"
            @click.stop="coverOrderClick"
            data-url="/pages/evaluationCenter/evaluationCenter"
          >
            <view class="order__quick--item">
              <view class="order__quick--badge">
                <image
                  class="order__quick--image"
                  :src="orderInfo.evaluateIcon.url"
                ></image>
              </view>
              <view class="order__quick--text">{{orderInfo.evaluateIcon.name}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="cover--container">
      <view
        class="cover--group"
        v-if="userCenter.menuStyle === 1"
      >
        <view
          v-for="(item, index) in expandMenu"
          :key="index"
          :class="'cover--group__expand ' + (item.splitFlag ? 'splitFlag' : '')"
          @click.stop="linkClick"
          :data-link="item.linkSelectItem"
        >
          <block v-if="item.hideMenu">
            <button
              open-type="contact"
              class="contact__button cover--group__cell"
              v-if="item.menuName === '客服'"
            >
              <view class="group__cell--left">
                <image
                  class="cell--left--image"
                  :src="item.menuIconUrl"
                ></image>
                <text class="cell--left--text">{{item.menuName}}</text>
              </view>
              <u-icon
                class="group__cell--right"
                name="arrow-right"
                         size="12"
              color="rgba(69, 64, 60, 0.6)"
              top="1"
              ></u-icon>
            </button>
            <view
              v-else
              :class="'cover--group__cell ' + (item.splitFlag ? 'splitFlag' : '')"
            >
              <view class="group__cell--left">
                <image
                  class="cell--left--image"
                  :src="item.menuIconUrl"
                ></image>
                <text class="cell--left--text">{{item.menuName}}</text>
              </view>
              <u-icon
                class="group__cell--right"
                name="arrow-right"
                                         size="12"
              color="rgba(69, 64, 60, 0.6)"
              top="1"
              ></u-icon>
            </view>
          </block>
        </view>
        <view class="cover--group__expand ">
          <view
            class="cover--group__cell"
            v-if="recyclingsetting.recyclingState"
            @click.stop="linkClick"
            :data-link="recyclingLink"
          >
            <view class="group__cell--left">
              <image
                class="cell--left--image"
                src="https://oss-tencent.bgniao.cn/api/mysend.png"
              ></image>
              <text class="cell--left--text">我的寄出</text>
            </view>
            <u-icon
              class="group__cell--right"
              name="arrow-right"
                                       size="12"
              color="rgba(69, 64, 60, 0.6)"
              top="1"
            ></u-icon>
          </view>
          <view
            class="cover--group__cell"
            v-if="recyclingsetting.goodsFundState"
            @click.stop="linkClick"
            :data-link="fundLink"
          >
            <view class="group__cell--left">
              <image
                class="cell--left--image"
                src="https://oss-tencent.bgniao.cn/api/myfund.png"
              ></image>
              <text class="cell--left--text">我的基金</text>
            </view>
            <u-icon
              class="group__cell--right"
              name="arrow-right"
              size="12"
              color="rgba(69, 64, 60, 0.6)"
              top="1"
            ></u-icon>
          </view>
        </view>
      </view>
      <view
        class="grid"
        v-if="userCenter.menuStyle === 2"
      >
        <view class="user__menu--grid">
          <view>
            <view class="grid__name">我的工具</view>
            <view class="grid__wrap">
              <view
                v-for="(supItem, supIndex) in gridMenu"
                :key="supIndex"
                class="grid__navigator"
                @click.stop="linkClick"
                :data-link="supItem.linkSelectItem"
              >
                <block v-if="supItem.hideMenu">
                  <button
                    open-type="contact"
                    class="grid__item"
                    v-if="supItem.menuName === '客服'"
                  >
                    <image
                      class="grid__navigator--image"
                      :src="supItem.menuIconUrl"
                    ></image>
                    <view class="grid__navigator--right">
                      <text class="grid__navigator--name">{{ supItem.menuName }}</text>
                    </view>
                  </button>
                  <view
                    v-else
                    class="grid__item"
                  >
                    <image
                      class="grid__navigator--image"
                      :src="supItem.menuIconUrl"
                    ></image>
                    <view class="grid__navigator--right">
                      <text class="grid__navigator--name">{{ supItem.menuName }}</text>
                    </view>
                  </view>
                </block>
              </view>
              <view
                class="grid__navigator"
                v-if="recyclingsetting.recyclingState"
              >
                <view
                  class="grid__item"
                  @click.stop="linkClick"
                  :data-link="recyclingLink"
                >
                  <image
                    class="grid__navigator--image"
                    src="https://oss-tencent.bgniao.cn/api/mysend.png"
                  ></image>
                  <view class="grid__navigator--right">
                    <text class="grid__navigator--name">我的寄出</text>
                  </view>
                </view>
              </view>
              <view
                class="grid__navigator"
                v-if="recyclingsetting.goodsFundState"
              >
                <view
                  class="grid__item"
                  @click.stop="linkClick"
                  :data-link="fundLink"
                >
                  <image
                    class="grid__navigator--image"
                    src="https://oss-tencent.bgniao.cn/api/myfund.png"
                  ></image>
                  <view class="grid__navigator--right">
                    <text class="grid__navigator--name">我的基金</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view
        class="version__text"
        @click="pageLink"
        data-link="/pages/index/modules/me/systemBanner/systemBanner"
      >
        <image
          class="miniBottomLog"
          v-if="!!shopInfo.miniBottomLog"
          :src="!!shopInfo.miniBottomLog ? shopInfo.miniBottomLog : ''"
        ></image>
        smart shop商城系统 v{{APP_VERSION}}
      </view>
      <u-popup 
      :show="qrcodeShow"
      mode="center"
      custom-style="background: rgba(255,255,255,0);width:590rpx;"
      @close="onClose"
      >
      <view style=" background-image: url('https://medusa-small-file-1253272780.cos.ap-shanghai.myqcloud.com/gruul/20211110/70436e0bdb7d43dda409a6ead4e63d9f.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  width: 100%;
  height: 1049rpx;
  position: relative;">
  
      <image :src="codeImage" style="position: absolute; 
      top: 774rpx;
      left: 82rpx;
      width: 173rpx;
      height: 173rpx;" />
      </view>
      </u-popup>
      <u-popup 
      :show="phoneShow"
      position=bottom 
      custom-style="height:450rpx;"
      @close="phoneClose"
      round="10"
      >
      <div style="font-size: 28rpx;margin-top: 66rpx;margin-left: 80rpx;color: #acacac">
      <div style="font-size: 36rpx;margin-bottom: 20rpx;font-weight: bold;color: #242424">授权手机信息</div>
                     
      您还未授权手机信息，点击下方按钮进行授权
      </div>
      
      <button class="buttonphone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" >获取手机号</button>
      </u-popup>
      <!-- 页面蒙版 用于新用户登录操作 勿删 -->
      <view
        class="loadMen"
        :style="'height:' + scrollHeight*1.35 + 'rpx'"
        @click="authLoad"
        v-if="scrollType"
      ></view>
      <auth
        :authType="authType"
        state="me"
        @cancel="cancel"
        @getNew="getNew"
      ></auth>
    </view>
  </view>
</template>

<script module="image" lang="wxs" src="@/wxs/image.wxs"></script>
<script lang='ts'>
  import {
    Component,
    Vue,
  } from 'vue-property-decorator'
  import {
    MenuList,
    CustomStyle
  } from "./userCenter";
  import {
    userMsgGet,userCodeGet,userIdGet,getPhone
  } from "@/api/modules/user";
  import {
  getImgCode,
} from "@/api/modules/goods";
  import {
    navtofun
  } from "@/utils/navtofun";
  import auth from "@/components/auth/auth.vue"
  import mIcon from "@/components/m-icon/m-icon.vue"
  @Component({
    components: {
      auth,
      mIcon
    }
  })
  export default class Me extends Vue {
    name = "mall"
    userInfo: any = {}
    recyclingsetting: any = {}
    activeNames = ["2"]
    /** 接口设置数据 */
    userCenter: any = {

      /** 自定义风格样式,json存储 */
      customStyle: "",

      /** 领卡文案 */
      getCartText: "",

      /** 头部风格 1-系统风格 2-自定义风格 */
      headStyle: 1,

      /** 非会员隐藏领卡入口 0-隐藏 1-显示 */
      hideCartInlet: 0,

      /** 用户中心数据id */
      id: 0,

      /** 菜单选择样式 1-展开式 2-折叠式 */
      menuStyle: 1,

      /** 菜单列表 */
      menuVos: [] as MenuList[],

      /** 订单icon信息 json存储 */
      orderInfo: ""
    }
    /** 自定义样式数据 */
    customStyle: CustomStyle = {
      backgroundImage: "",
      /** 卡面颜色 */
      cardColor: "",
      /** 文字颜色 */
      textColor: "",
    }
    /** 用户信息数据 */
    orderInfo: any = {}
    /** 展开式菜单数据 */
    expandMenu: Array < any > = []
    /** 九宫格菜单数据 */
    gridMenu: Array < any > = []
    qrcodeShow: boolean = false
    phoneShow: boolean = false
    authType: boolean = false
    headStyleConfig = {
      headBackGround: {},
      cardColor: "#45403C",
      textColor: "#E4CB98",
    }
    scrollHeight: number = 0
    scrollType: boolean = false
    /** 收藏数量 */
    collectNum: number = 0
    /** 足迹数量 */
    footNum: number = 0
    /** 积分值 */
    integral: number = 0
    /** 是否开启积分商城 */
    shopOpen: boolean = false
    // 是否开启评价
    hasOpenEvaluate: boolean = true
    // 会员信息
    memberInfo: Array < any > = []
    member = {
      status: 3,
      rankName: "",
      supplyAndRebateBonus: 0,
    }
    infoExtends = {
      shippingPointInfoVo: {
        pointId: "",
      }
    }
    orderBadgeInfo = {
      /** 代付款数目 */
      waitForPay: "",
      /** 配送中数目 */
      shipped: "",
      /** 待提货数目 */
      waitForPickup: "",
      /** 待发货数目 */
      withDelivery: ""
    }
    /** 版本号 */
    APP_VERSION = process.env.VUE_APP_APP_SHOW_VERSION
    shopInfo: any = {}
    packageFunctionVo = {
      area: false,
      copyright: false,
      headOffice: false,
      live: false,
      point: false,
    }
    codeImage:any=""
    canIUseGetUserProfile: boolean = false
    recyclingLink = {
      name: "我的寄出",
      url: "/pages/mysend/mysend",
    }
    fundLink = {
      name: "我的基金",
      url: "/pages/myfund/myfund",
    }
    get isCurrent() {
      return this.$store.state.settingStore.currentTab === this.name;
    }
    created() {
      uni.setNavigationBarTitle({
        title: "个人中心",
      });

      this.$Pubsub.on("app-launch", () => {
        this.userInfo = this.$store.state.userStore.userInfo
        this.getData();
      });
      this.init();
      if (uni.getUserProfile) {
        this.canIUseGetUserProfile = true
      }
    }
    /**
     * 生成数据
     */
    async init() {
      try {
        const windowHeight = uni.getSystemInfoSync().windowHeight; // 屏幕的高度
        const windowWidth = uni.getSystemInfoSync().windowWidth; // 屏幕的宽度
        const user = this.$store.state.userStore.userInfo;
        // 是否开启评价
        this.hasOpenEvaluate = this.$store.state.settingStore.shopSetting.hasOpenEvaluate
        this.scrollHeight = (windowHeight * 750) / windowWidth
        this.scrollType = !user.whetherAuthorization ? true : false
        // 获取缓存初次渲染
        // FIXME 没有递归转为JavaScript数据结构
        //   this.updateAllData(toJS(this.store.settingStore.userCenter));
        this.updateAllData(this.$store.state.settingStore.userCenter);
        // 获取最新个人中心数据并缓存
        this.getData();
      } catch (err) {
        console.log(err)
        // this.$Popup.alert(err || "个人中心获取失败");
      }
    }
    async getData() {
      await this.$store.dispatch('settingStore/getAllUserCenterData')
      const userCenterData = this.$store.state.settingStore.userCenter;
      this.getUserMsg();
      this.updateAllData(userCenterData);
      this.recyclingsetting = this.$store.state.settingStore.recyclingsetting
    }
    /**
     * 获取用户数据(修复充值后余额未及时更新)
     */
    async getUserMsg() {
      const res = await userMsgGet({
        infoLevel: 2
      });
      if (res.infoExtends) {
        this.infoExtends = res.infoExtends
        // 改变会员状态
        const memberInfo = res.infoExtends.memberInfo ?
          res.infoExtends.memberInfo : [];
        if (memberInfo && memberInfo.length > 0) {
          this.member = {
            status: memberInfo[0].status,
            rankName: memberInfo[0].rankName,
            supplyAndRebateBonus: memberInfo[0].supplyAndRebateBonus,
          }
        }
      }
    }

    updateAllData(userCenterData) {
      // 我的页面配置数据
      this.getUserCenterSetting(userCenterData.accountCenterVo);
      // 用户足迹数量
      this.footNum = userCenterData.accountFootMarkCount
      // 是否开启积分商城
      this.shopOpen = userCenterData.shopFunctionInfoVo.shop
      // 获取用户积分值
      this.integral = userCenterData.userInfoVo.integral ?
        userCenterData.userInfoVo.integral :
        0
      // 用户收藏数量
      this.collectNum = userCenterData.collectCount
      // 数量标记数据
      this.orderBadgeInfo = userCenterData.orderOverviewVo
      // 会员信息
      this.memberInfo = userCenterData.memberInfo
      this.shopInfo = this.$store.state.shopset.shopInfo
      this.packageFunctionVo = userCenterData.packageFunctionVo
    }

    // 页面跳转路径
    pageLink(e) {
      const url = e.currentTarget.dataset.link;
      uni.navigateTo({
        url: `/subcontract${url}`,
      });
    }

    /**
     * 前往我的足迹
     */
    gotoFooter() {
      uni.navigateTo({
        url: "/subcontract/pages/footer/footer",
      });
    }
    /**
     * 前往我的收藏页面
     */
    gotoCollect() {
      uni.navigateTo({
        url: "/subcontract/pages/collect/collect",
      });
    }

    /**
     * 前往积分商城
     */
    gotoIntegralShop() {
      const shopOpen = this.shopOpen;
      if (!shopOpen) {
        uni.showToast({
          title: "积分商城暂未开放",
          icon: "none",
        });
        return;
      } else {
        uni.navigateTo({
          url: "/subcontract/pages/integralShop/integralShop",
        });
      }
    }
    /** 登录注册 */
    authLoad() {
      this.scrollType = false
      const userInfo = this.$store.state.userStore.userInfo;
      if (!userInfo.whetherAuthorization) {
        this.authType = true
      }
    }
    /** TODO 页面上判断是否为新用户 */
    cancel() {
      this.authType = false
      this.scrollType = true
    }

    async getUserCenterSetting(userCenterVo) {
      if (!userCenterVo) {
        return;
      }
      const expandMenu = userCenterVo.menuVos
        .filter(item => {
          // 过滤出展开式菜单
          return item.styleType === 1;
        })
        .map(mapItem => {
          if (typeof mapItem.linkSelectItem === "string") {
            mapItem.linkSelectItem = JSON.parse(mapItem.linkSelectItem);
          }
          return mapItem;
        });
      // .filter(this.filterfFn.bind(this));
      const gridMenu = userCenterVo.menuVos
        .filter(item => {
          // 过滤出展开式菜单
          return item.styleType === 2 && item.hideMenu;
        })
        .map(mapItem => {
          if (typeof mapItem.linkSelectItem === "string") {
            mapItem.linkSelectItem = JSON.parse(mapItem.linkSelectItem);
          }
          return mapItem;
        });
      this.userCenter = userCenterVo
      this.orderInfo = JSON.parse(userCenterVo.orderInfo)
      this.customStyle = JSON.parse(userCenterVo.customStyle)
      this.expandMenu = expandMenu
      this.gridMenu = gridMenu
      this.userInfo = this.$store.state.userStore.userInfo
      // 系统风格
      if (this.userCenter.headStyle === 1) {
        this.headStyleConfig.headBackGround = `background-color: #FE4E63`
      }
      if (this.userCenter.headStyle === 2) {
        this.headStyleConfig.headBackGround = `background-image: url(${this.customStyle.backgroundImage})`,
          this.headStyleConfig.cardColor = this.customStyle.cardColor
        this.headStyleConfig.textColor = this.customStyle.textColor
      }
    }

    /**
     * 登陆后获取最新数据
     */
    getNew() {
      this.authType = false
      this.scrollType = false
        // this.userInfo = {
        //   nikeName: e.nickName,
        //   avatarUrl: e.avatarUrl,
        // }
        this.getData();
    }

    onClose() {
      this.qrcodeShow = false
    }
    phoneClose(){
      this.phoneShow = false
    }

    openQrcode() {
      userIdGet({}).then(id=>{
        const wxaGetwxacode = {
          path: `pages/index/index?userId=${id}`,
          width: 0,
        };
        getImgCode(wxaGetwxacode).then(res=>{
         this.codeImage=res;
         this.qrcodeShow = true
        })    
      })     
    }

    goOrder() {
      uni.navigateTo({
        url: "/subcontract/pages/order/order",
      });
    }

    // 菜单跳转链接点击处理事件
    async linkClick(e) {  
      const link = e.currentTarget.dataset.link;
      if(link.url==="/pages/distributionCenter/distributionCenter"){
        let userInfo = this.$store.state.userStore.userInfo;
       if(!userInfo.phone){
         this.phoneShow=true;
         return;
       }
      }
      if (link.append && link.append === "shopCar") {
        navtofun(link, this);
        return;
      }
      if (link.type && link.type === 7) {
        uni.navigateToMiniProgram({
          appId: link.url,
          envVersion: "release",
        });
        return;
      }
      if (link.url === "/pages/mysend/mysend") {
        uni.navigateTo({
          url: "/subcontract/pages/mysend/mysend",
        });
        return;
      }
      if ((link.type && (link.type === 5 || link.type === 6)) || link.append === "mall") {
        navtofun(link, this);
        return;
      }
      this.linkLogcal(link);
    }
    async linkLogcal(link) {
      // 空链接不进行跳转
      if (!link.url) {
        return;
      }
      // 积分商城开通
      if (link.url === "/pages/integralShop/integralShop") {
        const shopOpen = this.shopOpen;
        if (!shopOpen) {
          uni.showToast({
            title: "积分商城暂未开放",
            icon: "none",
          });
          return;
        }
      }

      // 回收返券开通
      if (link.url === "/pages/recycling/recycling") {
        const shopOpen = this.$store.state.settingStore.recyclingsetting.recyclingState;
        if (!shopOpen) {
          uni.showToast({
            title: "回收返券暂未开放",
            icon: "none",
          });
          return;
        }
      }

      // 会员中心
      if (link.url === "/pages/member/member") {
        // debugger;
        const status = this.member.status;
        if (status === 1) {
          uni.navigateTo({
            url: "/subcontract/pages/memberVip/memberVip",
          });
        }
        if (status === 2) {
          uni.navigateTo({
            url: "/subcontract/pages/member/member",
          });
        }
        if (status > 2) {
          uni.showToast({
            title: "该功能暂未开放",
            icon: "none",
          });
        }
        return;
      }
      // 首页跳转
      if (link.url === "/pages/index/index") {
        this.$store.commit('settingStore/setCurrentTab', link.append);
        return;
      }
      // 列表和九宫格的设置跳转
      if (link.menuName === "设置" || link.url === "/pages/mySetting/mySetting") {
        if (this.userCenter.menuStyle === 1) {
          await uni.navigateTo({
            url: "/subcontract/pages/mySetting/mySetting?type=1",
          });
        }
        if (this.userCenter.menuStyle === 2) {
          await uni.navigateTo({
            url: "/subcontract/pages/mySetting/mySetting?type=2",
          });
        }
        return;
      }
      if (link.type && link.type === 6) {
        await uni.navigateTo({
          url: "/subcontract/pages/linkPge/linkPge?src=" + link.url,
        });
        return;
      }
      // // 普通链接跳转
      await uni.navigateTo({
        url: link.url,
      });
      this.linkTypeHandle(link);
    }
    async linkTypeHandle(link) {
      // 分类页
      if (link.type === 2) {
        // currentPageId String类型
        this.$store.commit('settingStore/setCurrentPageId', link.id + "");
        this.$store.commit('settingStore/setCurrentTab', link.append);
        // 自定义分类id
        return;
      }
      // 商超商品
      if (link.type === 1) {
        // 自定义分类id
        await uni.navigateTo({
          url: "/subcontract" + link.url + "?id=" + link.id,
        });
        return;
      }
    }

    coverOrderClick(e) {
      const url = e.currentTarget.dataset.url;
      uni.navigateTo({
        url: `/subcontract${url}`,
      });
    }

    goMemberVip() {
      uni.navigateTo({
        url: "/subcontract/pages/memberVip/memberVip",
      });
    }

    goMember() {
      uni.navigateTo({
        url: "/subcontract/pages/member/member",
      });
    }

    async balanceJumpHandle() {
      const balanceDetail = `/pages/balanceValue/balanceValue`;
      uni.navigateTo({
        url: "/subcontract" + balanceDetail
      });
    }


    getPhoneNumber(e: any) {
    if (e.detail.errMsg === "getPhoneNumber:fail user deny") {
      this.phoneShow=false;
      this.$global.toast("分销中心需要您授权手机号")
      return;
    } else {
      const encryptedData = e.detail.encryptedData;
      const ivStr = e.detail.iv;
      const sessionKey = this.$store.state.userStore.userInfo.sessionKey;
      const params = {
        encryptedData,
        ivStr,
        sessionKey,
      };
      getPhone(params).then(res => {
        let userInfo = this.$store.state.userStore.userInfo as any;
        userInfo.phone = res;
        this.$store.dispatch('userStore/updateUser', userInfo);
        this.userInfo = userInfo
        this.phoneShow=false;
        this.$global.toast("获取手机号成功")
      })

    }
  }
  navSetUser(){
    uni.navigateTo({
      url:"/subcontract/pages/userInfo/userInfo"
    })
  }
  }
  
</script>
<style lang="scss" scoped>
  @mixin flex($justify-content: center, $align-items: center) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
  }

  @mixin bottom-line($weight: 1px, $color: #f8f5f9) {
    border-bottom: $weight solid $color;
  }

  // 页面主色
  $page-main-color: #fe4e63;
  // 字体颜色
  $page-text-color: #45403c;
  // 默认边距
  $default-side: 18rpx;
  // 默认字体大小
  $default-font-size: 26rpx;
  // 内容字体大小
  $content-font-size: 26rpx;

  .loadMen {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    z-index: 9;
  }

  .updateBtn {
    width: 50rpx;
    height: 50rpx;
    background-color: white;
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
  }

  // .noshadow {
  //   hover-class: none;
  // }

  .box {
    width: 100vw;
    position: relative;
    background-color: #f5f5f5;
    overflow: hidden;

    .user--container {
      background-size: cover;
      background-repeat: no-repeat;
      width: 100vw;
      z-index: 2;

      .user--layout {
        width: 90vw;
        margin: 0 auto;
        padding: 40rpx 0 20rpx 0;
        @include flex(space-between, center);

        .user--layout__info {
          @include flex;
        }

        .user--layout__icon {
          display: flex;
          width: 110rpx;
          flex-wrap: wrap;
          justify-content: center;

          .user--layout__icon__text {
            font-size: 24rpx;
            color: white;
            margin-top: 8rpx;
          }
        }

        .user--layout__container {
          padding-left: 20rpx;
          @include flex(space-between, flex-start);
          flex-direction: column;
        }

        .user--layout__nikeName {
          @include flex;
        }

        .user--layout__image {
          flex: 0 0 118rpx;
          width: 118rpx;
          height: 118rpx;
          border-radius: 50%;
          box-shadow: 0 0 0 6rpx white;
        }

        .user--layout__text {
          vertical-align: middle;
          font-size: 32rpx;
          color: #ffffff;
          padding-left: 20rpx;
        }

        .user--layout__member {
          line-height: 44rpx;
          border: 2rpx solid white;
          border-radius: 22rpx;
          padding: 0 10rpx;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            color: #f3ca7e;
          }

          text {

            font-size: 22rpx;
            color: #ffffff;
          }
        }

        .user--layout__recode {
          display: flex;
          color: white;
          font-size: 26rpx;
        }

        .user--layout__qrcode {
          font-size: 50rpx;
          line-height: 0rpx;
          width: 100rpx;
          height: 100rpx;
          background-color: white;
          opacity: 0.25;
          border-radius: 12rpx;
        }
      }

      .content {
        margin: 20rpx 20rpx 0rpx 20rpx;
        padding: 0rpx 20rpx !important;
        border-radius: 15rpx;
        z-index: 10;
        height: 136rpx;

        .content__all {
          height: 136rpx;
          display: flex;
          justify-content: space-around;
          align-items: center;
          font-size: 26rpx;
          color: #ffffff;

          .content__all--item {
            width: 56rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
          }
        }
      }

      .user--layout__recode__text {
        width: 60rpx;
        height: 76rpx;
        flex-wrap: wrap;
        display: flex;
        justify-content: center;
      }

      .user--layout__recode__line {
        height: 50rpx;
        background-color: white;
        width: 2rpx;
        margin: 4rpx 20rpx 0px 20rpx;
      }

      /* 会员权益 */
      .radius {
        width: 100vw;
        margin: 20rpx auto 0;

        .radius--inner {
          width: calc(100% - 36rpx);
          height: 90rpx;
          border-radius: 10rpx 10rpx 0% 0%;
          margin: 0rpx $default-side;
          padding: 0rpx 30rpx 0rpx 40rpx;
          @include flex(space-between, center);

          .radius--inner__item {
            font-size: $content-font-size;
          }

          .radius--inner__split {
            padding: 0 20rpx;
          }

          .radius--inner__btn {
            border-radius: 80rpx;
            width: 139rpx;
            height: 39rpx;
            font-size: $content-font-size;
            line-height: 39rpx;
            text-align: center;
          }
        }
      }
    }
  }


  .order {
    width: 100vw;
    margin: 0 auto;
    padding: 20rpx 20rpx 0 20rpx !important;

    .order__all {
      @include flex(space-between, center);
      padding: 30rpx 28rpx 30rpx 36rpx;
      border-radius: 15rpx 15rpx 0 0;
      @include bottom-line;
      font-size: $content-font-size;
      background-color: #ffffff;

      .order__all--me {
        color: $page-text-color;
        font-weight: bold;
        font-size: 30rpx;
      }

      .order__all--check {
        @include flex();
        color: rgba(69, 64, 60, 0.6);
        background-color: #ffffff;
      }
    }

    .order__quick {
      @include flex(space-between, center);
      padding: 35rpx 24rpx;
      margin: 0;
      background-color: #ffffff;
      border-radius: 0 0 15rpx 15rpx;
      overflow: hidden;

      .order__quick--item {
        text-align: center;
        position: relative;
        width: 110rpx;

        .order__quick--badge {
          position: relative;
          display: inline-block;

          .order__quick--image {
            margin-bottom: 10rpx;
            width: 50rpx;
            height: 50rpx;
          }

          .order__quick--number {
            position: absolute;
            top: 0;
            right: 0;
            box-sizing: border-box;
            min-width: 32rpx;
            padding: 0 6rpx;
            color: #fff;
            font-weight: 500;
            font-size: 24rpx;
            font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
            line-height: 28rpx;
            text-align: center;
            background-color: #ee0a24;
            border: 2rpx solid #fff;
            border-radius: 32rpx;
            -webkit-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
            -webkit-transform-origin: 100%;
            transform-origin: 100%;
          }
        }

        .order__quick--text {
          font-size: $content-font-size;
          color: rgb(102, 94, 88);
        }
      }
    }
  }

  .cover--container {
    background-color: #f5f5f5;
    padding: $default-side;

    .cover--group {
      border-radius: 10rpx;
      margin-bottom: 15rpx;

      .cover--group__expand:first-child {
        .cover--group__cell {
          border-top-right-radius: 15rpx;
          border-top-left-radius: 15rpx;
          font-family: "first-child";
        }
      }

      .cover--group__expand:last-child {
        .cover--group__cell {
          border-bottom-right-radius: 15rpx;
          border-bottom-left-radius: 15rpx;
          font-family: "last-child";
        }
      }

      .cover--group__expand:not(:last-child) {
        .cover--group__cell {
          // CSS样式
          @include bottom-line;
        }
      }

      .cover--group__expand.splitFlag+.cover--group__expand {
        .cover--group__cell {
          border-top-right-radius: 15rpx;
          border-top-left-radius: 15rpx;
          font-family: "+";
        }
      }

      .cover--group__expand.splitFlag {
        .cover--group__cell {
          margin-bottom: 15rpx;
          border-bottom-right-radius: 15rpx;
          border-bottom-left-radius: 15rpx;
          font-family: "splitFlag";
        }
      }

      .cover--group__cell {
        @include flex(space-between, center);
        background-color: #ffffff;
        padding: 30rpx 25rpx 30rpx 42rpx;

        .group__cell--left {
          @include flex(center, center);

          .cell--left--image {
            width: 38rpx;
            height: 38rpx;
            padding-right: 23rpx;
          }

          .cell--left--text {
            font-size: $default-font-size;
            color: $page-text-color;
          }
        }

        .group__cell--right {
          color: rgba(69, 64, 60, 0.6);
          font-size: 24rpx;
          line-height: 0rpx;
        }
      }
    }

    .grid {
      background-color: #ffffff;
      margin-bottom: 30rpx;
      border-radius: 10rpx;
      padding: 4rpx 0;

      .grid__name {
        font-size: 28rpx;
        color: #45403c;
        padding: 30rpx 0 20rpx 38rpx;
        font-weight: bolder;
      }

      .grid__item {
        text-align: center;
      }

      .grid__wrap {
        @include flex(flex-start);
        flex-wrap: wrap;

        .grid__navigator {
          @include flex();
          flex-direction: column;
          flex: 0 0 25%;
          padding: 30rpx 0;

          .grid__navigator--image {
            width: 50rpx;
            height: 50rpx;
          }

          .grid__navigator--right {
            text-align: center;
            padding-top: 20rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .grid__navigator--name {
              font-size: 26rpx;
              color: #58524d;
            }

            .grid__navigator--text {
              font-size: 28rpx;
              color: #b2b2b2;
            }
          }
        }
      }
    }

    .navigator-hover {
      background-color: #f1f2f6;
    }

    .version__text {
      font-size: 26rpx;
      color: #b2b2b2;
      text-align: center;
      padding: 40rpx 0px;
    }

    .borderRadius {
      border-radius: 100%;
    }

    .contact__button {
      color: #45403c;
      background-color: transparent;
      font-size: 32rpx;
    }
  }
  .buttonphone{
    background: #d82f34;
    margin: 50rpx auto 50rpx;
    width: 516rpx;
    height: 80rpx;
    border-radius: 80rpx;
    text-align: center;
    line-height: 80rpx;
    // color: #d82f34;
    color: #fff;
    font-size: 28rpx;

  }

  .miniBottomLog {
    width: 100rpx;
    margin: 0 auto;
    height: 100rpx;
    display: flex;
  }
</style>